import QtQuick 1.0
import "UIConstants.js" as UI

Item {
    id: root

    property alias titleText: title.text
    property alias subtitleText: subtitle.text
    property alias iconSource: image.source
    property bool selected: index === root.ListView.view.currentIndex

    signal clicked

    height: UI.LIST_ITEM_HEIGHT_DEFAULT
    width: ListView.view.width

    BorderImage {
        id: background
        anchors.fill: parent
        border { left: UI.CORNER_MARGINS; top: UI.CORNER_MARGINS; right: UI.CORNER_MARGINS; bottom: UI.CORNER_MARGINS }
        source: root.selected ? visual.highlightBackground : ""
    }

    Item {
        anchors.fill: parent
        anchors.leftMargin: UI.DEFAULT_MARGIN
        anchors.rightMargin: UI.DEFAULT_MARGIN
        Column {
            anchors.verticalCenter: parent.verticalCenter
            width: parent.width - image.width

            Text {
                id: title
                width: parent.width
                elide: Text.ElideRight
                font.pixelSize: UI.FONT_DEFAULT
                font.bold: true
                color: UI.COLOR_FOREGROUND
            }
            Text {
                id: subtitle
                width: parent.width
                elide: Text.ElideRight
                font.pixelSize: UI.FONT_SMALL
                color: UI.COLOR_SECONDARY_FOREGROUND
            }
        }
        Image {
            id: image
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
        onPressed: {
            root.ListView.view.currentIndex = index;
        }
        onReleased: {
            root.ListView.view.currentIndex = -1;
        }
        onCanceled: {
            root.ListView.view.currentIndex = -1;
        }
    }
}
